<!DOCTYPE html>
<html>
<head>
    <title>Tech Style Baidu Map Test</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=eaV8OIruO7nXlIMKMu5I0OTZLd9YScpa"></script>
    <style>
        body { 
            margin: 0; 
            padding: 20px; 
            font-family: 'Courier New', monospace;
            background: linear-gradient(135deg, #0a1429 0%, #1a2332 100%);
            color: #00ffff;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 { 
            text-align: center; 
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
            margin-bottom: 30px;
        }
        
        #map { 
            width: 100%; 
            height: 600px; 
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 12px;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
            background: linear-gradient(135deg, #0a1429 0%, #1a2332 100%);
        }
        
        .status { 
            padding: 15px; 
            margin: 20px 0; 
            border-radius: 8px;
            border: 1px solid rgba(0, 255, 255, 0.3);
            background: rgba(0, 10, 20, 0.9);
            backdrop-filter: blur(10px);
        }
        
        .success { 
            border-color: rgba(103, 194, 58, 0.5);
            box-shadow: 0 0 15px rgba(103, 194, 58, 0.3);
        }
        
        .error { 
            border-color: rgba(245, 108, 108, 0.5);
            box-shadow: 0 0 15px rgba(245, 108, 108, 0.3);
        }
        
        .info { 
            border-color: rgba(0, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
        }
        
        .tech-controls {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: linear-gradient(135deg, rgba(0, 10, 20, 0.9), rgba(15, 28, 46, 0.8));
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 8px;
            padding: 16px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        .tech-btn {
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1));
            border: 1px solid rgba(0, 255, 255, 0.3);
            color: #00ffff;
            border-radius: 6px;
            padding: 8px 12px;
            margin: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }
        
        .tech-btn:hover {
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2));
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
            transform: translateY(-2px);
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .feature-item {
            background: rgba(0, 10, 20, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 8px;
            padding: 16px;
            backdrop-filter: blur(5px);
        }
        
        .feature-title {
            color: #00ffff;
            font-weight: bold;
            margin-bottom: 8px;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 科技感百度地图测试</h1>
        
        <div id="status" class="status info">
            🚀 正在加载科技感百度地图API...请等待地图显示
        </div>
        
        <div style="position: relative;">
            <div id="map"></div>
            
            <div class="tech-controls">
                <div style="margin-bottom: 10px;">
                    <strong style="color: #00ffff;">地图控制</strong>
                </div>
                <button class="tech-btn" onclick="zoomIn()">🔍 放大</button>
                <button class="tech-btn" onclick="zoomOut()">🔍 缩小</button>
                <button class="tech-btn" onclick="resetCenter()">📍 重置</button>
                <button class="tech-btn" onclick="toggleScanning()">📡 扫描线</button>
            </div>
        </div>
        
        <div class="feature-list">
            <div class="feature-item">
                <div class="feature-title">🎨 深色科技主题</div>
                <p>自定义地图样式，深色背景配合霓虹色彩</p>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">✨ 发光标记点</div>
                <p>SVG图标带发光效果和脉冲动画</p>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">🎯 科技感信息窗口</div>
                <p>自定义样式的信息弹窗，带有装饰元素</p>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">💫 粒子效果</div>
                <p>浮动粒子营造未来科技氛围</p>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">📡 扫描线动画</div>
                <p>雷达扫描效果增强科技感</p>
            </div>
            
            <div class="feature-item">
                <div class="feature-title">🎛️ 控制面板</div>
                <p>毛玻璃效果配合霓虹边框</p>
            </div>
        </div>
    </div>
    
    <script>
        let map;
        let scanningActive = false;
        let scanningInterval;
        
        function testTechBaiduMap() {
            try {
                if (typeof BMap === 'undefined') {
                    document.getElementById('status').innerHTML = '❌ 错误: BMap对象未加载，请检查API密钥和网络连接';
                    document.getElementById('status').className = 'status error';
                    return;
                }
                
                // 创建地图实例
                map = new BMap.Map("map", {
                    enableMapClick: false,
                    enableHighResolution: true
                });
                
                // 设置科技感的地图样式
                const techStyle = {
                    styleJson: [
                        {
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#000000",
                                "saturation": -100,
                                "lightness": -70,
                                "visibility": "on"
                            }
                        },
                        {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#0a1a2aff",
                                "visibility": "on"
                            }
                        },
                        {
                            "featureType": "land",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#0f1c2eff",
                                "visibility": "on"
                            }
                        },
                        {
                            "featureType": "road",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#1a3a5aff",
                                "visibility": "on"
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#14283aff",
                                "visibility": "on"
                            }
                        },
                        {
                            "featureType": "green",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#0d2135ff",
                                "visibility": "on"
                            }
                        }
                    ]
                };
                
                map.setMapStyle(techStyle);
                
                // 设置中心点和缩放级别
                const point = new BMap.Point(116.4074, 39.9042);
                map.centerAndZoom(point, 10);
                
                // 启用滚轮缩放
                map.enableScrollWheelZoom(true);
                
                // 添加科技感标记点
                addTechMarkers();
                
                // 添加粒子效果
                addParticleEffects();
                
                // 更新状态
                document.getElementById('status').innerHTML = '✅ 成功: 科技感百度地图加载完成！已显示多个储能站位置';
                document.getElementById('status').className = 'status success';
                
                console.log('Tech Baidu Map Status:', {
                    version: BMap.version,
                    ak: 'eaV8OIruO7nXlIMKMu5I0OTZLd9YScpa',
                    center: map.getCenter(),
                    zoom: map.getZoom(),
                    markers: '10 tech-style markers added',
                    features: 'Dark theme, glowing effects, particles, scanning animation'
                });
                
            } catch (error) {
                document.getElementById('status').innerHTML = '❌ 错误: ' + error.message;
                document.getElementById('status').className = 'status error';
                console.error('Tech Baidu Map Error:', error);
            }
        }
        
        function addTechMarkers() {
            if (!map) return;
            
            const techStations = [
                { name: '北京储能站', lng: 116.4074, lat: 39.9042, capacity: '30.4 MW/60.8 MWh', type: '磷酸铁锂' },
                { name: '上海储能站', lng: 121.4737, lat: 31.2304, capacity: '25.6 MW/51.2 MWh', type: '三元锂' },
                { name: '广州储能站', lng: 113.2644, lat: 23.1291, capacity: '37.0 MW/74.0 MWh', type: '磷酸铁锂' },
                { name: '深圳储能站', lng: 114.0579, lat: 22.5431, capacity: '28.6 MW/57.2 MWh', type: '磷酸铁锂' },
                { name: '杭州储能站', lng: 120.1551, lat: 30.2741, capacity: '19.4 MW/38.8 MWh', type: '铅炭电池' },
                { name: '南京储能站', lng: 118.7969, lat: 32.0603, capacity: '22.4 MW/44.8 MWh', type: '磷酸铁锂' },
                { name: '武汉储能站', lng: 114.3055, lat: 30.5928, capacity: '27.2 MW/54.4 MWh', type: '三元锂' },
                { name: '成都储能站', lng: 104.0665, lat: 30.5723, capacity: '33.6 MW/67.2 MWh', type: '磷酸铁锂' },
                { name: '西安储能站', lng: 108.9402, lat: 34.3416, capacity: '21.0 MW/42.0 MWh', type: '铅炭电池' },
                { name: '重庆储能站', lng: 106.5516, lat: 29.5630, capacity: '31.8 MW/63.6 MWh', type: '磷酸铁锂' }
            ];
            
            techStations.forEach((station, index) => {
                const point = new BMap.Point(station.lng, station.lat);
                
                // 创建科技感图标
                const colors = {
                    '磷酸铁锂': '#67C23A',
                    '三元锂': '#E6A23C',
                    '铅炭电池': '#909399'
                };
                const color = colors[station.type] || '#4F95FF';
                
                const svg = `
                    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <radialGradient id="grad${index}" cx="50%" cy="50%" r="50%">
                                <stop offset="0%" style="stop-color:${color};stop-opacity:1" />
                                <stop offset="100%" style="stop-color:${color};stop-opacity:0.3" />
                            </radialGradient>
                            <filter id="glow${index}">
                                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                                <feMerge>
                                    <feMergeNode in="coloredBlur"/>
                                    <feMergeNode in="SourceGraphic"/>
                                </feMerge>
                            </filter>
                        </defs>
                        <circle cx="20" cy="20" r="15" fill="url(#grad${index})" stroke="${color}" stroke-width="2" filter="url(#glow${index})"/>
                        <circle cx="20" cy="20" r="8" fill="${color}" stroke="#ffffff" stroke-width="1"/>
                        <circle cx="20" cy="20" r="3" fill="#ffffff"/>
                    </svg>
                `;
                
                const icon = new BMap.Icon(
                    'data:image/svg+xml;base64,' + btoa(svg),
                    new BMap.Size(40, 40)
                );
                
                const marker = new BMap.Marker(point, { icon });
                
                // 添加科技感标签
                const label = new BMap.Label(station.name, {
                    offset: new BMap.Size(25, -25)
                });
                label.setStyle({
                    color: '#00ffff',
                    backgroundColor: 'rgba(0, 10, 20, 0.9)',
                    border: '1px solid #00ffff',
                    borderRadius: '6px',
                    padding: '6px 12px',
                    fontSize: '12px',
                    fontWeight: 'bold',
                    boxShadow: '0 0 10px rgba(0, 255, 255, 0.5)',
                    textShadow: '0 0 5px rgba(0, 255, 255, 0.8)',
                    fontFamily: 'monospace'
                });
                marker.setLabel(label);
                
                // 添加点击事件
                marker.addEventListener('click', function() {
                    const content = `
                        <div style="
                            background: linear-gradient(135deg, rgba(0, 10, 20, 0.9), rgba(15, 28, 46, 0.8));
                            border: 1px solid rgba(0, 255, 255, 0.3);
                            border-radius: 12px;
                            padding: 16px;
                            color: #00ffff;
                            font-family: monospace;
                            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
                            min-width: 250px;
                        ">
                            <div style="border-bottom: 1px solid rgba(0, 255, 255, 0.3); margin-bottom: 12px; padding-bottom: 8px;">
                                <h4 style="margin: 0; color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);">${station.name}</h4>
                            </div>
                            <div style="margin-bottom: 8px;">
                                <span style="margin-right: 8px;">⚡</span>
                                <span style="color: rgba(0, 255, 255, 0.9);">装机容量: ${station.capacity}</span>
                            </div>
                            <div style="margin-bottom: 8px;">
                                <span style="margin-right: 8px;">🔋</span>
                                <span style="color: rgba(0, 255, 255, 0.9);">电池类型: ${station.type}</span>
                            </div>
                            <div>
                                <span style="margin-right: 8px;">📍</span>
                                <span style="color: rgba(0, 255, 255, 0.9);">坐标: ${station.lng}°E, ${station.lat}°N</span>
                            </div>
                        </div>
                    `;
                    
                    const infoWindow = new BMap.InfoWindow(content, {
                        width: 280,
                        height: 160,
                        title: '',
                        enableMessage: false
                    });
                    
                    this.openInfoWindow(infoWindow);
                });
                
                map.addOverlay(marker);
            });
        }
        
        function addParticleEffects() {
            // 这里可以添加CSS动画粒子效果
            console.log('Particle effects would be added via CSS animations');
        }
        
        function zoomIn() {
            if (map) map.zoomIn();
        }
        
        function zoomOut() {
            if (map) map.zoomOut();
        }
        
        function resetCenter() {
            if (map) {
                const point = new BMap.Point(116.4074, 39.9042);
                map.centerAndZoom(point, 10);
            }
        }
        
        function toggleScanning() {
            scanningActive = !scanningActive;
            if (scanningActive) {
                startScanningAnimation();
            } else {
                stopScanningAnimation();
            }
        }
        
        function startScanningAnimation() {
            // 添加扫描线效果
            const scanningLine = document.createElement('div');
            scanningLine.id = 'scanningLine';
            scanningLine.style.cssText = `
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background: linear-gradient(90deg, transparent, #00ffff, transparent);
                z-index: 999;
                animation: scanAnimation 4s infinite;
                pointer-events: none;
            `;
            
            document.getElementById('map').appendChild(scanningLine);
        }
        
        function stopScanningAnimation() {
            const scanningLine = document.getElementById('scanningLine');
            if (scanningLine) {
                scanningLine.remove();
            }
        }
        
        // 添加扫描动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes scanAnimation {
                0% {
                    top: 0;
                    opacity: 1;
                }
                100% {
                    top: 100%;
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
        
        // 等待页面加载完成
        window.onload = function() {
            setTimeout(testTechBaiduMap, 1000);
        };
    </script>
</body>
</html>